<template>
  <div class="my-likes-container">
    <el-card v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>我的喜欢</span>
        </div>
      </template>

      <div v-if="shares.length > 0" class="shares-list">
        <el-card
          v-for="share in shares"
          :key="share.id"
          class="share-card"
          shadow="hover"
        >
          <div class="share-header">
            <div class="user-info">
              <el-avatar
                :size="40"
                :src="share.useravatar"
                :icon="User"
              />
              <span class="username">{{ share.username }}</span>
            </div>
            <span class="time">{{ formatDateTime(share.createdAt) }}</span>
          </div>

          <div class="share-content">
            <div class="question-section">
              <div class="label">问题：</div>
              <div class="content">{{ share.userAnswer }}</div>
            </div>
            <div class="answer-section">
              <div class="label">正确答案：</div>
              <div class="content">{{ share.correctAnswer }}</div>
            </div>
            <div v-if="share.shareNote" class="note-section">
              <div class="label">分享说明：</div>
              <div class="content">{{ share.shareNote }}</div>
            </div>
          </div>

          <div class="share-footer">
            <div class="stats">
              <el-button
                type="primary"
                text
                @click.stop="handleLike(share.id)"
              >
                <el-icon><Pointer /></el-icon>
                {{ share.likeCount }}
              </el-button>
              <el-button
                type="warning"
                text
                @click.stop="openHistoryDialog(share)"
              >
                <el-icon><Timer /></el-icon>
                回顾历史
              </el-button>
            </div>
          </div>
        </el-card>
      </div>

      <el-empty
        v-else
        description="暂无点赞内容"
        :image-size="200"
      />

      <div class="pagination-container" v-if="total > pageSize">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 添加回顾历史对话框 -->
    <el-dialog
      v-model="historyDialogVisible"
      title="回顾历史记录"
      width="60%"
      :close-on-click-modal="false"
    >
      <div v-loading="historyLoading">
        <template v-if="reviewHistories.length > 0">
          <div class="history-question-info">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="问题">
                {{ currentShare?.userAnswer }}
              </el-descriptions-item>
              <el-descriptions-item label="正确答案">
                {{ currentShare?.correctAnswer }}
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="history-list">
            <el-timeline>
              <el-timeline-item
                v-for="history in reviewHistories"
                :key="history.id"
                :timestamp="formatDateTime(history.createdAt)"
                type="primary"
              >
                <el-card class="history-card">
                  {{ history.reviewNote }}
                </el-card>
              </el-timeline-item>
            </el-timeline>

            <div class="pagination-container" v-if="historyTotal > historyPageSize">
              <el-pagination
                v-model:current-page="historyCurrentPage"
                :page-size="historyPageSize"
                :total="historyTotal"
                layout="prev, pager, next"
                @current-change="handleHistoryPageChange"
              />
            </div>
          </div>
        </template>

        <el-empty
          v-else
          description="暂无回顾记录"
          :image-size="200"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Pointer, Timer } from '@element-plus/icons-vue'
import axios from '../utils/axios'

const shares = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 添加回顾历史相关的响应式变量
const historyDialogVisible = ref(false)
const currentShare = ref(null)
const reviewHistories = ref([])
const historyLoading = ref(false)
const historyTotal = ref(0)
const historyCurrentPage = ref(1)
const historyPageSize = ref(5)

const fetchLikedShares = async () => {
  loading.value = true
  try {
    const response = await axios.get('/community/shares/liked', {
      params: {
        page: currentPage.value - 1,
        size: pageSize.value
      }
    })
    shares.value = response.data.content
    total.value = response.data.totalElements
  } catch (error) {
    ElMessage.error('获取点赞列表失败：' + (error.response?.data?.message || '未知错误'))
  } finally {
    loading.value = false
  }
}

const handlePageChange = (page) => {
  currentPage.value = page
  fetchLikedShares()
}

const handleLike = async (shareId) => {
  try {
    const { data } = await axios.post(`/community/shares/${shareId}/like`)
    ElMessage.success(data.message)
    await fetchLikedShares()
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '操作失败')
  }
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  return new Date(dateTime).toLocaleString()
}

// 添加回顾历史相关的方法
const openHistoryDialog = async (share) => {
  if (!share || !share.wrongQuestionId) {
    ElMessage.error('无法获取错题信息')
    return
  }

  currentShare.value = share
  historyDialogVisible.value = true
  historyCurrentPage.value = 1
  await fetchReviewHistory()
}

const fetchReviewHistory = async () => {
  if (!currentShare.value || !currentShare.value.wrongQuestionId) {
    ElMessage.error('无法获取错题信息')
    return
  }

  historyLoading.value = true
  try {
    const response = await axios.get(
      `/wrong-questions/${currentShare.value.wrongQuestionId}/review-history`,
      {
        params: {
          page: historyCurrentPage.value - 1,
          size: historyPageSize.value
        }
      }
    )
    reviewHistories.value = response.data.content
    historyTotal.value = response.data.totalElements
  } catch (error) {
    ElMessage.error('获取回顾历史失败：' + (error.response?.data?.message || '未知错误'))
  } finally {
    historyLoading.value = false
  }
}

const handleHistoryPageChange = (page) => {
  historyCurrentPage.value = page
  fetchReviewHistory()
}

onMounted(() => {
  fetchLikedShares()
})
</script>

<style scoped>
.my-likes-container {
  padding: 20px;
}

/* 其他样式与 Community.vue 相同 */

.history-question-info {
  margin-bottom: 20px;
}

.history-list {
  margin-top: 20px;
}

.history-card {
  margin-bottom: 10px;
}

:deep(.el-timeline-item__content) {
  flex: 1;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}

:deep(.el-descriptions__label) {
  font-weight: bold;
  width: 100px;
}

.share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.username {
  font-weight: bold;
  color: #303133;
  font-size: 14px;
}

.time {
  color: #909399;
  font-size: 13px;
}

.share-content {
  padding: 10px 0;
}

.question-section,
.answer-section,
.note-section {
  margin-bottom: 15px;
}

.label {
  font-weight: bold;
  color: #409EFF;  /* Element Plus 主题蓝色 */
  margin-bottom: 8px;
  font-size: 15px;
  display: inline-block;
  background-color: #ecf5ff;  /* 浅蓝色背景 */
  padding: 2px 8px;
  border-radius: 4px;
}

.content {
  color: #303133;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  padding-left: 8px;
}
</style> 